<template>
  <view class="bg min100 plr-30 gray-2">
    <view class="status_bar"></view>

    <!-- <image src="../../static/homeImg.png" class="homeImg mtb-34"></image> -->

    <view class="search-wrap">
      <u-search
        placeholder="请输入搜索内容"
        @change="toSearch"
        search-icon-color="#EFE0C0"
        v-model="query.search"
        placeholder-color="#999"
        style="color: #f5f5f5; margin-left: -18rpx"
        color="#f5f5f5"
        bg-color="#ffffff00"
        :show-action="false"
      ></u-search>

      <view class="sort" @click="initTime">
        <view>时间</view>
        <!-- 1=正序 2=倒叙 -->
        <image src="../../static/sort.png" v-if="query.time_order === ''" />
        <image src="../../static/sort-asc.png" v-if="query.time_order === 1" />
        <image src="../../static/sort-desc.png" v-if="query.time_order === 2" />
      </view>

      <view class="sort" @click="initPrice">
        <view>价格</view>
        <!-- 1=正序 2=倒叙 -->
        <image src="../../static/sort.png" v-if="query.price_order === ''" />
        <image src="../../static/sort-asc.png" v-if="query.price_order === 1" />
        <image src="../../static/sort-desc.png" v-if="query.price_order === 2" />
      </view>
    </view>

    <!-- <u-search placeholder="请输入搜索内容" @custom="toSearch" search-icon-color="#EFE0C0" v-model="query.search"
			placeholder-color="#999" style="color:#fff;" color="#fff" bg-color="#ffffff00" :show-action="false"></u-search> -->

    <!-- <view class="flex flex-start mtb-34 white size-26">
			<view class="flex mr-40">
				<view class="mr-10">
					时间
				</view>
				<view class="">
					<u-icon @click="initTime(1)" style="display: block;" name="arrow-up-fill" size="16"
						:color="query.time_order==1?'#EFE0C0':'#999'"></u-icon>
					<u-icon @click="initTime(2)" style="display: block;" name="arrow-down-fill" size="16"
						:color="query.time_order==2?'#EFE0C0':'#999'"></u-icon>
				</view>
			</view>
			<view class="flex ml-40">
				<view class="mr-10">
					价格
				</view>
				<view class="">
					<u-icon @click="initPrice(1)" style="display: block;" name="arrow-up-fill" size="16"
						:color="query.price_order==1?'#EFE0C0':'#999'"></u-icon>
					<u-icon @click="initPrice(2)" style="display: block;" name="arrow-down-fill" size="16"
						:color="query.price_order==2?'#EFE0C0':'#999'"></u-icon>
				</view>
			</view>
		</view> -->

    <!-- 藏品列表 -->
    <empty v-if="list.length == 0"></empty>
    <view class="" v-else v-for="(item, index) in list" :key="index" @click="goDetails(item.id)">
      <view class="radius-40 mb-30 size-22 collect-item" style="position: relative">
        <image class="collectImg" :src="item.image" mode="aspectFill"></image>

        <view v-if="item.status == 1" class="itemTips plr-20 ptb-8" style="background: rgba(0, 0, 0, 0.6)">
          {{ item.status_text }}
        </view>

        <view class="itemTips plr-20 ptb-8" v-if="item.status == 2" style="color: #f5f5f5; background: #484848">
          {{ item.status_text }}
        </view>

        <view class="itemTips plr-20 ptb-8 flex size-24" v-if="item.status == 3" style="color: #EFE0C0; background: rgba(0, 0, 0, 0.5)">
          <image src="../../static/time.png" class="timeImg mr-8"></image>
          <view class="gold">
            {{ item.status_text }}
          </view>
        </view>

        <view class="itemTips plr-20 ptb-8 flex center" v-if="item.status == 4" style="background: linear-gradient(to right, #cf58e5, #fc76d5)">
          <view class="">
            {{ item.status_text }}
          </view>
          <u-count-down
            :timestamp="item.diff_time"
            bg-color="background:transparent"
            color="#f5f5f5"
            font-size="24"
            separator-color="#f5f5f5"
            style="margin-left: 5rpx"
          ></u-count-down>
        </view>

        <view class="plr-20 ptb-20 white collect-item-mess">
			<view class="flex1 flex-middle">
				<view class="size-32 title">{{ item.name }}</view>
				<image src="/static/homeIcon.png" class="homeIcon ml-20" mode=""></image>
			</view>
			<view class='flex flex-between'>
				<view class="mtb-10 flex flex-between">
					<view class="flex flex-start mr-20">
					  <view class="bg-gold color-1a plr-10 size-24" style="height: 40rpx;line-height: 40rpx;border-radius: 6rpx 0 0 6rpx;"> 限量 </view>
					  <view class="tipsRight gold plr-10" style="border-radius: 0 6rpx 6rpx 0;height: 40rpx;line-height: 40rpx;">{{ item.stock }}</view>
					</view>
				</view>
				<view class="size-36 bold gold"> ￥{{ item.price }} </view>
				<!-- <view class="flex1 flex-middle">
					<image src="/static/about-logo.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;display: block;" class="radius"></image>
					<view class="size-24 color-c ml-10">星链空间</view>
					
				</view> -->
			</view>
        </view>
      </view>
    </view>
    <tabbar ref="tabbar"></tabbar>
  </view>
</template>

<script>
import empty from '../../components/empty.vue'
import tabbar from '../../components/tabbar.vue'
export default {
  components: {
    empty,
    tabbar,
  },
  data() {
    return {
      query: {
        // 1=正序 2=倒叙
        time_order: '',
        // 1=正序 2=倒叙
        price_order: '',
        page: 1,
        pagesize: 10,
        search: '',
      },
      flag: false, //上拉加载
      status: 'more',
      list: [],
    }
  },
  onShow() {
		this.query.page = 1
    this.init();
    this.$refs['tabbar'].init();
  },
  onHide() {
    this.list = []
    this.flag = false
    this.status = 'more'
    this.query = {
      time_order: '',
      price_order: '',
      page: 1,
      pagesize: 10,
      search: '',
    }
  },
  onReachBottom() {
    if (!this.flag) {
      this.status = 'loading'
      this.query.page++
      this.init()
    }
  },
  onPullDownRefresh() {
    this.flag = false
    this.query.page = 1
    this.list = []
    this.init()
  },
  methods: {
    // 时间排序
    initTime() {
      if (this.query.time_order === '') {
        this.query.time_order = 1
      } else if (this.query.time_order === 1) {
        this.query.time_order = 2
      } else if (this.query.time_order === 2) {
        this.query.time_order = 1
      }
      this.query.price_order = ''
      this.list = []
      this.query.page = 1
      this.init()
    },
    // 价格排序
    initPrice() {
      if (this.query.price_order === '') {
        this.query.price_order = 1
      } else if (this.query.price_order === 1) {
        this.query.price_order = 2
      } else if (this.query.price_order === 2) {
        this.query.price_order = 1
      }
      this.query.time_order = ''
      this.list = []
      this.query.page = 1
      this.init()
    },
    init() {
      this.$http('api/box/boxList', this.query).then(res => {
        uni.stopPullDownRefresh()
        let data = res.data
        if (data.length == 0) {
          this.flag = true
          this.status = 'noMore'
        } else {
          this.list = this.list.concat(data)
          if (data.length < 10) {
            this.flag = true
            this.status = 'noMore'
          }
        }
      })
    },
    toSearch() {
      this.query.page = 1
      this.list = []
      this.init()
    },
    goDetails(id) {
      uni.navigateTo({
        url: './boxDetails?id=' + id,
      })
    },
  },
}
</script>
<style>
	page {
	  background: #f5f5f5;
	}
</style>
<style lang="less" scoped>

page{
	background: #f5f5f5;
}
.white {
  color: #3c3c3c;
}
.gold {
  color: #9c8b66;
}
.search-wrap {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  .sort {
    display: flex;
    align-items: center;
    margin-left: 10rpx;
    image {
      width: 16rpx;
      height: 24rpx;
      margin-left: 10rpx;
    }
    & + .sort {
      margin-left: 40rpx;
    }
  }
}

.homeImg {
  width: 342rpx;
  height: 60rpx;
}
.collect-item{
	background: #fff;
	border-radius: 8rpx;
	height: 260rpx;
	display: flex;
	.collect-item-mess{
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: space-between;
	}
	.collectImg {
		width: 260rpx;
		height: 260rpx;
		border-radius: 8rpx 0 0 8rpx;
	}
}



.homeIcon {
  width: 30rpx;
  height: 30rpx;
	display: block;
}

.timeImg {
  width: 24rpx;
  height: 24rpx;
}

.tipsRight {
  background: rgba(255, 255, 255, 0.2);
}

.userImg {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background: #666;
}

/deep/ .u-action-active {
  color: #f5f5f5;
}

.itemTips {
  position: absolute;
  left: 20rpx;
  top: 20rpx;
  // background: #E52C2C;
  border-radius: 24rpx;
  color: #fff;
  font-size: 26rpx;
  z-index: 100;
}
.title {
  font-weight: 600;
}
</style>
